<template>
    <view class="container">
        <view class="title">Untitled GPT</view>
        <scroll-view class="message-list" :scroll-y="true" :scroll-into-view="scrollIntoView">
            <view class="message-item" v-for="(item, index) in messages" :key="index">
                <view :class="'message-content ' + item.type">
                    <view class="message-text">{{ item.content }}</view>
                </view>
            </view>
        </scroll-view>
        <view class="input-container">
            <textarea class="input" placeholder="给&quot;UntitledGPT&quot;发送消息" @input="handleInput" :value="inputMessage" />
            <button class="send-button" @tap="sendMessage">发送</button>
        </view>
    </view>
</template>

<script>
import navigationBar from '@/components/navigation-bar/navigation-bar';
export default {
    components: {
        navigationBar
    },
    data() {
        return {
            inputMessage: '',
            messages: [],
            scrollIntoView: ''
        };
    },
    methods: {
        handleInput(event) {
            this.setData({
                inputMessage: event.detail.value
            });
        },

        async sendMessage() {
            const message = this.inputMessage;
            if (!message) {
                return;
            }
            const response = await uni.request({
                url: 'https://api.chatanywhere.com.cn/v1/chat/completions',
                method: 'POST',
                data: {
                    model: 'gpt-3.5-turbo',
                    messages: [
                        {
                            role: 'user',
                            content: message
                        }
                    ]
                },
                header: {
                    Authorization: 'Bearer sk-Z8Ts7maHcNt40Iz1NiLUiNQnXtby5NQGKW0UpPoHkjbklTEV',
                    'Content-Type': 'application/json'
                },
                success: (res) => {
                    const reply = res.data.choices[0].message.content;
                    this.setData({
                        inputMessage: '',
                        messages: [
                            ...this.messages,
                            {
                                content: message,
                                type: 'user',
                                alignment: 'right'
                            },
                            {
                                content: reply,
                                type: 'bot',
                                alignment: 'left'
                            }
                        ],
                        scrollIntoView: 'msg-' + (this.messages.length - 1)
                    });
                },
                fail: (error) => {
                    console.error(error);
                }
            });
        }
    }
};
</script>
<style>
.title {
    font-size: 24px;
    font-weight: bold;
    text-align: center;
    margin-top: 20px;
    margin-bottom: 10px;
}
.container {
    display: flex;
    flex-direction: column;
    height: 92vh;
    padding: 20rpx;
    margin-top: 70rpx;
}

.message-list {
    flex: 1;
    padding: 10rpx;
    overflow-y: scroll;
}

.message-item {
    display: flex;
    margin-bottom: 10rpx;
}
.user .message-item {
    justify-content: flex-end;
}

.bot .message-item {
    justify-content: flex-start;
}

.message-content {
    padding: 10rpx;
    border-radius: 10rpx;
    max-width: 80%;
}

.message-text {
    color: #fff;
    word-wrap: break-word;
}

.user {
    align-self: flex-end;
    background-color: #60a6ec;
}

.bot {
    align-self: flex-start;
    background-color: #525352;
}

.input-container {
    display: flex;
    align-items: center;
    margin-top: 20rpx;
	margin-bottom: 60rpx;
}

.input {
   width: 450rpx;
   height: 80rpx;
     padding: 15rpx;
     font-size: 30rpx;
     border: 1px solid #ccc;
     border-radius: 5px;
     resize: none;  /* 禁止手动调整大小 */
}

.send-button {
	display: flex;
	width: 125rpx;
    margin-left: 5rpx;
    padding: 10rpx 30rpx;
    background-color: #007aff;
    color: #fff;
    border-radius: 10rpx;
	font-size: 30rpx;
	text-align: center;
	line-height: 55rpx;
}
</style>
